<!DOCTYPE html>
<html lang="en" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="/layui/css/layui.css">
  <link rel="stylesheet" href="/css/custom.form.css">
</head>
<body>
<div class="panel panel-default operation" hidden>
  <div class="panel-heading title"></div>
<div class="layui-card-body">
<form class="layui-form " action="" lay-filter="info" style="width: 700px;margin-top: 10px">
      <input name="id" hidden/>
        <div class="layui-form-item">
      <label class="layui-form-label">账号名称</label>
      <div class="layui-input-block">
        <input type="username" name="username" placeholder="请输入账号名称" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">所属部门</label>
      <div class="layui-input-block">
        <input type="org" name="org" placeholder="请输入所属部门" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">所属公司</label>
      <div class="layui-input-block">
        <input type="company" name="company" placeholder="请输入所属公司" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">拨打次数</label>
      <div class="layui-input-block">
        <input type="bdcs" name="bdcs" placeholder="请输入拨打次数" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">接通数</label>
      <div class="layui-input-block">
        <input type="jts" name="jts" placeholder="请输入接通数" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">接通率</label>
      <div class="layui-input-block">
        <input type="jtl" name="jtl" placeholder="请输入接通率" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">通话时长</label>
      <div class="layui-input-block">
        <input type="thsc" name="thsc" placeholder="请输入通话时长" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">平均通话时长</label>
      <div class="layui-input-block">
        <input type="pjthsc" name="pjthsc" placeholder="请输入平均通话时长" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">计费时长</label>
      <div class="layui-input-block">
        <input type="jfsc" name="jfsc" placeholder="请输入计费时长" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">通话时间</label>
      <div class="layui-input-block">
        <input type="thtime" name="thtime" placeholder="请输入通话时间" autocomplete="off" class="layui-input">
      </div>
    </div>
  <div class="layui-form-item">
  <div class="layui-input-block">
    <button type="submit" class="layui-btn" lay-submit="" lay-filter="submit">保存</button>
    <button  class="layui-btn layui-btn-primary" id="btn_cancel">返回</button>
  </div>
</div>
</form>
</div>
</div>

<div class="table_div">
  <div id="searchParam"  shiro:hasPermission="tThrb:list">
    <div class="layui-form-item">
        <div class="layui-form-item">
            <div class="layui-input-inline layui-form">
                <input type="text" name="date" class="layui-input" id="test-range2" placeholder="请选择时间范围">
            </div>
            <div class="layui-input-inline layui-form" id="corporatenameSCid" hidden style="display: none;">
                <select id="corporatenameSC" lay-search="">
                    <option value="">请选择公司名称</option>
                </select>
            </div>
            <div class="layui-input-inline layui-form" id="deptSCid" hidden style="display: none;">
                <select id="deptSC" lay-search="">
                    <option value="">请选择部门</option>
                </select>
            </div>
            <div class="layui-input-inline layui-form" id="xsSCid" hidden style="display: none;">
                <select id="xsSC" lay-search="">
                    <option value="">请选择员工</option>
                </select>
            </div>
      <div class="layui-input-inline ">
        <button class="layui-btn" onclick="search()"  id="search">查询</button>
      </div>
    </div>
  </div>
  <table class="layui-table" id="showTable" lay-filter="showTable" ></table>
</div>
</body>
</html>
<script src="/layui/layui.all.js"></script>
<script src="/js/core.util.js"></script>
<script>
  //获取token
  var token = CoreUtil.getData("access_token");
  userInfo = CoreUtil.getData("userInfo");
  userRoles = CoreUtil.getData("userRoles");
  userDepts = CoreUtil.getData("userDepts");
  sysRolesList = CoreUtil.getData("sysRolesList");
  userSysUsers = CoreUtil.getData("userSysUsers");
  hwtj = CoreUtil.getData("hwtj");
  //地址栏转义token中的#号
  var tokenQuery = token.replace("#", "%23");
  var tableIns1;
  var table = layui.table;
  var form = layui.form;
  var layer = layui.layer;
  var $ = jQuery = layui.jquery;
  var laydate = layui.laydate;
  Date.prototype.Format = function (fmt) {
      var o = {
          "M+": this.getMonth() + 1, //月份
          "d+": this.getDate(), //日
          "H+": this.getHours(), //小时
          "m+": this.getMinutes(), //分
          "s+": this.getSeconds(), //秒
          "q+": Math.floor((this.getMonth() + 3) / 3), //季度
          S: this.getMilliseconds(), //毫秒
      };
      if (/(y+)/.test(fmt))
          fmt = fmt.replace(
              RegExp.$1,
              (this.getFullYear() + "").substr(4 - RegExp.$1.length)
          );
      for (var k in o)
          if (new RegExp("(" + k + ")").test(fmt))
              fmt = fmt.replace(
                  RegExp.$1,
                  RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length)
              );
      return fmt;
  };
  layui.use(['table', 'layer', 'laydate'], function () {
      var eDate =  (new Date()).Format("yyyy-MM-dd");
      var sDate =  (new Date()).Format("yyyy-MM-dd");
      var dateValue = sDate + ' - ' + eDate;
      laydate.render({
          elem: '#test-range2' ,//指定元素
          range: true,
          value: dateValue
      });
      var tableIns = function () {
          var range =  $('#test-range2').val().replace(/ - /g,' 至 ');
          var split = range.split(' 至 ');
          //这里以搜索为例
          var whereData = { //设定异步数据接口的额外参数，任意设
              startDate: split[0]+" 00:00:00",
              endDate: split[1]+" 23:59:59",
          }
          //根据部门区分表格
          var deptName = userInfo.sysRoleName;

          if (!tableIns1 && (deptName.indexOf("管理员")>-1 || deptName.indexOf("代理")>-1)) {
              //查询项走
              $("#corporatenameSCid").show();
              $("#xsSCid").show();
              $("#deptSCid").show();
              //加载table
              tableIns1 = table.render({
                  elem: '#showTable'
                  , contentType: 'application/json'
                  , headers: {"authorization": token}
                  , page: true //开启分页
                  , where: whereData
                  , url: '/tThrb/listByPage' //数据接口
                  , method: 'POST'
                  , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                      return {
                          "code": res.code, //解析接口状态
                          "msg": res.msg, //解析提示文本
                          "count": CoreUtil.isEmpty(res.data) ? 0 : res.data.total, //解析数据长度
                          "data": CoreUtil.isEmpty(res.data) ? null : res.data.records //解析数据列表
                      }
                  }
                  , cols: [
                      [
                          {field: 'username', title: '账号名称', sort: true, align:"center"},
                          {field: 'org', title: '所属部门', sort: true, align:"center" ,width:"20%"},
                          {field: 'company', title: '所属公司', sort: true, align:"center",width:"20%"},
                          {field: 'bdcs', title: '拨打次数',templet: function (item) {
                                  if (!!item.bdcs) {
                                      return item.bdcs;
                                  } else {
                                      return 0;
                                  }
                              },  sort: true, align:"center"},
                          {field: 'jts', title: '接通数',templet: function (item) {
                                  if (!!item.jts) {
                                      return item.jts;
                                  } else {
                                      return 0;
                                  }
                              },  sort: true, align:"center"},
                          {field: 'jtl', title: '接通率',templet: function (item) {
                                  if (!!item.jtl) {
                                      return (item.jtl*100).toFixed(2) +"%";
                                  } else {
                                      return 0;
                                  }
                              },  sort: true, align:"center"},
                          {field: 'thsc', title: '通话时长', sort: true, align:"center"},
                          {field: 'pjthsc', title: '平均通话时长',templet: function (item) {
                                  if (!!item.pjthsc) {
                                      return item.pjthsc+"秒";
                                  } else {
                                      return 0;
                                  }
                              },  sort: true, align:"center"},
                          {field: 'jfsc', title: '计费时长', templet: function (item) {
                                  if (!!item.jfsc) {
                                      return item.jfsc;
                                  } else {
                                      return 0;
                                  }
                              }, sort: true, align:"center"},
                          // {field: 'thtime', title: '通话时间', sort: true, align:"center"},
                          // {width: 120, toolbar: "#tool", title: '操作'}
                      ]
                  ]
                  , toolbar: '#toolbar'
              });
          } else if (!tableIns1 && (deptName.indexOf("总经理") > -1 || deptName.indexOf("总监") > -1) || deptName.indexOf("主管") > -1) {
              //查询项
              $("#deptSCid").show();
              $("#xsSCid").show();
              //加载table
              tableIns1 = table.render({
                  elem: '#showTable'
                  , contentType: 'application/json'
                  , headers: {"authorization": token}
                  , page: true //开启分页
                  , where: whereData
                  , url: '/tThrb/listByPage' //数据接口
                  , method: 'POST'
                  , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                      return {
                          "code": res.code, //解析接口状态
                          "msg": res.msg, //解析提示文本
                          "count": CoreUtil.isEmpty(res.data) ? 0 : res.data.total, //解析数据长度
                          "data": CoreUtil.isEmpty(res.data) ? null : res.data.records //解析数据列表
                      }
                  }
                  , cols: [
                      [
                          {field: 'username', title: '账号名称', sort: true, align: "center"},
                          {field: 'org', title: '所属部门', sort: true, align: "center"},
                          // {field: 'company', title: '所属公司', sort: true, align:"center"},
                          {
                              field: 'bdcs', title: '拨打次数', templet: function (item) {
                                  if (!!item.bdcs) {
                                      return item.bdcs;
                                  } else {
                                      return 0;
                                  }
                              }, sort: true, align: "center"
                          },
                          {field: 'jts', title: '接通数',templet: function (item) {
                                  if (!!item.jts) {
                                      return item.jts;
                                  } else {
                                      return 0;
                                  }
                              },  sort: true, align:"center"},
                          {field: 'jtl', title: '接通率',templet: function (item) {
                                  debugger
                                  if (!!item.jtl) {
                                      return (item.jtl*100).toFixed(2) +"%";
                                  } else {
                                      return 0;
                                  }
                              },  sort: true, align:"center"},
                          {field: 'thsc', title: '通话时长', sort: true, align:"center"},
                          {field: 'pjthsc', title: '平均通话时长',templet: function (item) {
                                  if (!!item.pjthsc) {
                                      return item.pjthsc+"秒";
                                  } else {
                                      return 0;
                                  }
                              },  sort: true, align:"center"},
                          {field: 'jfsc', title: '计费时长', templet: function (item) {
                                  if (!!item.jfsc) {
                                      return item.jfsc;
                                  } else {
                                      return 0;
                                  }
                              }, sort: true, align:"center"},
                          // {field: 'thtime', title: '通话时间', sort: true, align:"center"},
                          // {width: 120, toolbar: "#tool", title: '操作'}
                      ]
                  ]
                  , toolbar: '#toolbar'
              });
          }
          else {
              //加载table
              tableIns1 = table.render({
                  elem: '#showTable'
                  , contentType: 'application/json'
                  , headers: {"authorization": token}
                  , page: true //开启分页
                  , where: whereData
                  , url: '/tThrb/listByPage' //数据接口
                  , method: 'POST'
                  , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                      return {
                          "code": res.code, //解析接口状态
                          "msg": res.msg, //解析提示文本
                          "count": CoreUtil.isEmpty(res.data) ? 0 : res.data.total, //解析数据长度
                          "data": CoreUtil.isEmpty(res.data) ? null : res.data.records //解析数据列表
                      }
                  }
                  , cols: [
                      [
                          {field: 'username', title: '账号名称', sort: true, align:"center"},
                          {field: 'org', title: '所属部门', sort: true, align:"center"},
                          // {field: 'company', title: '所属公司', sort: true, align:"center"},
                          {field: 'bdcs', title: '拨打次数',templet: function (item) {
                                  if (!!item.bdcs) {
                                      return item.bdcs;
                                  } else {
                                      return 0;
                                  }
                              },  sort: true, align:"center"},
                          {field: 'jts', title: '接通数',templet: function (item) {
                                  if (!!item.jts) {
                                      return item.jts;
                                  } else {
                                      return 0;
                                  }
                              },  sort: true, align:"center"},
                          {field: 'jtl', title: '接通率',templet: function (item) {
                                  if (!!item.jtl) {
                                      debugger
                                      return (item.jtl*100).toFixed(2) +"%";
                                  } else {
                                      return 0;
                                  }
                              },  sort: true, align:"center"},
                          {field: 'thsc', title: '通话时长', sort: true, align:"center"},
                          {field: 'pjthsc', title: '平均通话时长',templet: function (item) {
                                  if (!!item.pjthsc) {
                                      return item.pjthsc+"秒";
                                  } else {
                                      return 0;
                                  }
                              },  sort: true, align:"center"},
                          {field: 'jfsc', title: '计费时长', templet: function (item) {
                                  if (!!item.jfsc) {
                                      return item.jfsc;
                                  } else {
                                      return 0;
                                  }
                              }, sort: true, align:"center"},
                          // {field: 'thtime', title: '通话时间', sort: true, align:"center"},
                          // {width: 120, toolbar: "#tool", title: '操作'}
                      ]
                  ]
                  , toolbar: '#toolbar'
              });
          }
      };
      var info  = function () { // CoreUtil.sendGet("/sys/home/", null, function (res) {
          //     userInfo = res.data.userInfo;
          //     userRoles = res.data.sysRole;
          //     userDepts = res.data.dept;
          //     userSysUsers = res.data.users;
          //
          // });

          //加载表格
          tableIns();
          CoreUtil.setData("tThrb_infoData",null);
         var tThrb_infoData = CoreUtil.getData("tThrb_infoData");
         if (!!tThrb_infoData) {
             var data =tThrb_infoData ;
             //请选择公司、请选择销售、请选择代理、请选择线路;
             //公司
             var corporatenameSC = $("#corporatenameSC");
             $.each(data.company, function (index, item) {
                 if (!!item) {
                     corporatenameSC.append("<option value=" + item + ">" + item + "</option>");
                 }
             });
             //部门
             var deptSC = $("#deptSC");
             $.each(data.dept, function (index, item) {
                 deptSC.append("<option value=" + item + ">" + item + "</option>");
             });
             //销售 -- 员工
             var xsSC = $("#xsSC");
             $.each(data.xs, function (index, item) {
                 if (!!item) {
                     xsSC.append("<option value=" + item + ">" + item + "</option>");
                 }
             });
             form.render("select");
         } else {
             CoreUtil.sendGet("/tThrb/infoData/", null, function (res) {
                 var code = res.code;
                 var data = res.data;
                 //请选择公司、请选择销售、请选择代理、请选择线路;
                 if (code == 0) {
                     CoreUtil.setData("tThrb_infoData",null);
                     CoreUtil.setData("tThrb_infoData",res.data);
                     //公司
                     var corporatenameSC = $("#corporatenameSC");
                     $.each(data.company, function (index, item) {
                         if (!!item) {
                             corporatenameSC.append("<option value=" + item + ">" + item + "</option>");
                         }
                     });
                     //部门
                     var deptSC = $("#deptSC");
                     $.each(data.dept, function (index, item) {
                         deptSC.append("<option value=" + item + ">" + item + "</option>");
                     });
                     //销售 -- 员工
                     var xsSC = $("#xsSC");
                     $.each(data.xs, function (index, item) {
                         if (!!item) {
                             xsSC.append("<option value=" + item + ">" + item + "</option>");
                         }
                     });
                     form.render("select");
                 }
             });
         }
      };
      info();
        //加载表格


    //导出
    $('#export').on('click', function () {
      //原先分页limit
      var exportParams = {
        limit: 10000,
        key: $("#key").val()
      };
      CoreUtil.sendPost("/tThrb/listByPage", exportParams, function (res) {
        //初始化渲染数据
        if (res.data != null && res.data.records != null) {
          table.exportFile(tableIns1.config.id, res.data.records, 'xls');
        }
      });
    });

    //返回
    $("#btn_cancel").click(function() {
      $(".table_div").show();
      $(".operation").hide();
      return false;
    });
  });




  //执行查询
  function search() {
      var range =  $('#test-range2').val().replace(/ - /g,' 至 ');
      var split = range.split(' 至 ');
      //这里以搜索为例
      tableIns1.reload({
          where: { //设定异步数据接口的额外参数，任意设
              startDate: split[0]+" 00:00:00",
              endDate: split[1]+" 23:59:59",
              company: $("#corporatenameSC").val(),
              username: $("#xsSC").val(),
              org: $("#deptSC").val()
          }
          , page: {
              curr: 1 //重新从第 1 页开始
          }
    });
  };
</script>